<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../react18/react.development.js"></script>
  <script src="../react18/react-dom.development.js"></script>
  <script src="../react18/babel.min.js"></script>
</head>

<body>
  <button id="btn">修改vDOM,并重新渲染</button> 
  <div id="app"></div>
  <script type="text/babel">
    //案例1 当点击的时候,发现只有p标签重新渲染,其他元素还在浏览中保留
//    const vDOM = (
//     <div> 
//         <p>❤</p>
//         <h1>heart</h1>
//     </div>)
//创建容器并渲染虚拟DOM
//     const root = ReactDOM.createRoot(document.querySelector('#app'))
//     root.render(vDOM)
//     document.querySelector('#btn').onclick = function(){
//         const vDOM = (
//     <div> 
//         <p>😔</p>
//         <h1>heart</h1>
//     </div>)
    
//     root.render(vDOM)
//     }
//案例2 点击时只是新增了一个li，之前的li保留原来的
    // const arr = ['a','b','c','d']
    // const vDOM =(
    //     <ul>
    //         {arr.map(item=>(<li>{item}</li>))}     
    //     </ul>
    // )
    // const root = ReactDOM.createRoot(document.querySelector('#app'))
    // root.render(vDOM)

    // document.querySelector("#btn").onclick = function(){
    //     arr.push('e')
    //     const vDOM =( 
    //     <ul>
    //         {arr.map(item=>(<li>{item}</li>))}     
    //     </ul>)
    //     root.render(vDOM)

    // }
//案例3 点击在数组最前面增加数据时，因为是按dom书写顺序比较，所以所有li都会重新渲染
//  const arr = ['a','b','c','d']
//     const vDOM =(
//         <ul>
//             {arr.map(item=>(<li>{item}</li>))}     
//         </ul>
//     )
//     const root = ReactDOM.createRoot(document.querySelector('#app'))
//     root.render(vDOM)

//     document.querySelector("#btn").onclick = function(){
//         arr.unshift('e')
//         const vDOM =( 
//         <ul>
//             {arr.map(item=>(<li>{item}</li>))}     
//         </ul>)
//         root.render(vDOM)

//     }
//案例四 如果结构中还包含输入类的DOM：会产生错误DOM更新，input框输入的内容input标签察觉不到，会一直保留不重新渲染
// const arr = ['a','b','c','d']
// const vDOM = (
//     <ul>
//        {arr.map(item=><li>{item} <input type='text'/></li>)}
        
//     </ul>)
// const root = ReactDOM.createRoot(document.querySelector('#app'))
// root.render(vDOM)

// document.querySelector("#btn").onclick = function(){
//         arr.unshift('e')
//         const vDOM =( 
//         <ul>
//             {arr.map(item=>(<li>{item} <input type='text'/></li>))}     
//         </ul>)
//         root.render(vDOM)

//     }
//案例5 给虚拟dom上添加key属性，最好使用每条数据的唯一标识作为key的值，这样旧的dom和新的dom在比较时就不会按顺序比较，会先找key，key变了的dom才会重新渲染
const arr = ['a','b','c','d']
const vDOM = (
    <ul>
       {arr.map(item=><li key={item}>{item}</li>)}
        
    </ul>)
const root = ReactDOM.createRoot(document.querySelector('#app'))
root.render(vDOM)

document.querySelector("#btn").onclick = function(){
        arr.unshift('e')
        const vDOM =( 
        <ul>
            {arr.map(item=>(<li key={item}>{item}</li>))}     
        </ul>)
        root.render(vDOM)

    }
  </script>
</body>

</html>